import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { ListGroup, ListGroupItem, Panel } from 'react-bootstrap';

export default class AccordionPanel extends PureComponent {
  render() {
    const {
      before, after, list, title, eventKey,
    } = this.props;

    /**
     * 定制panel
     * @method setPanel
     * created by wjxu on 2018-05-24T14:21:05+0800
     * @param  {Array} panels panel主体数据数组
     */
    const listItem = list.map(e => (
      <ListGroupItem key={e.key}>{e.text}</ListGroupItem>
    ));

    return (
      <Panel eventKey={eventKey}>
        <Panel.Heading>{title}</Panel.Heading>
        { before && <Panel.Body>{before}</Panel.Body>}
        <ListGroup>{listItem}</ListGroup>
        { after && <Panel.Body>{after}</Panel.Body>}
      </Panel>
    );
  }
}

AccordionPanel.defaultProps = {
  before: '',
  after: '',
  list: [],
  title: '',
  eventKey: 0,
};

AccordionPanel.propTypes = {
  before: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
  ]),
  after: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
  ]),
  list: PropTypes.array,
  title: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
  ]),
  eventKey: PropTypes.number,
};

